
<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Charts</a>
    </li>
    <li class="active">Morris</li>
</ol>


<div class="row">
    <div class="col-md-6">
        <!-- AREA CHART -->
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Area Chart</h3>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="revenue-chart" style="height: 300px;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <!-- DONUT CHART -->
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Donut Chart</h3>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

    </div>
    <!-- /.col (LEFT) -->
    <div class="col-md-6">
        <!-- LINE CHART -->
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title">Line Chart</h3>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="line-chart" style="height: 300px;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <!-- BAR CHART -->
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Bar Chart</h3>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="bar-chart" style="height: 300px;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

    </div>
    <!-- /.col (RIGHT) -->
</div>
<!-- /.row -->



<!-- page script -->
<script>
"use strict";

// AREA CHART
var area = new Morris.Area({
    element: 'revenue-chart',
    resize: true,
    data: [{
        y: '2011 Q1',
        item1: 2666,
        item2: 2666
    }, {
        y: '2011 Q2',
        item1: 2778,
        item2: 2294
    }, {
        y: '2011 Q3',
        item1: 4912,
        item2: 1969
    }, {
        y: '2011 Q4',
        item1: 3767,
        item2: 3597
    }, {
        y: '2012 Q1',
        item1: 6810,
        item2: 1914
    }, {
        y: '2012 Q2',
        item1: 5670,
        item2: 4293
    }, {
        y: '2012 Q3',
        item1: 4820,
        item2: 3795
    }, {
        y: '2012 Q4',
        item1: 15073,
        item2: 5967
    }, {
        y: '2013 Q1',
        item1: 10687,
        item2: 4460
    }, {
        y: '2013 Q2',
        item1: 8432,
        item2: 5713
    }],
    xkey: 'y',
    ykeys: ['item1', 'item2'],
    labels: ['Item 1', 'Item 2'],
    lineColors: ['#a0d0e0', '#3c8dbc'],
    hideHover: 'auto'
});

// LINE CHART
var line = new Morris.Line({
    element: 'line-chart',
    resize: true,
    data: [{
        y: '2011 Q1',
        item1: 2666
    }, {
        y: '2011 Q2',
        item1: 2778
    }, {
        y: '2011 Q3',
        item1: 4912
    }, {
        y: '2011 Q4',
        item1: 3767
    }, {
        y: '2012 Q1',
        item1: 6810
    }, {
        y: '2012 Q2',
        item1: 5670
    }, {
        y: '2012 Q3',
        item1: 4820
    }, {
        y: '2012 Q4',
        item1: 15073
    }, {
        y: '2013 Q1',
        item1: 10687
    }, {
        y: '2013 Q2',
        item1: 8432
    }],
    xkey: 'y',
    ykeys: ['item1'],
    labels: ['Item 1'],
    lineColors: ['#3c8dbc'],
    hideHover: 'auto'
});

//DONUT CHART
var donut = new Morris.Donut({
    element: 'sales-chart',
    resize: true,
    colors: ["#3c8dbc", "#0190D9", "#37A8AF"],
    data: [{
        label: "Agree",
        value: 56
    }, {
        label: "Disagree",
        value: 32
    }, {
        label: "Abstained",
        value: 40
    }],
    hideHover: 'auto'
});
//BAR CHART
var bar = new Morris.Bar({
    element: 'bar-chart',
    resize: true,
    data: [{
        y: '2006',
        a: 20,
        b: 30
    }, {
        y: '2007',
        a: 45,
        b: 43
    }, {
        y: '2008',
        a: 60,
        b: 74
    }, {
        y: '2009',
        a: 80,
        b: 90
    }, {
        y: '2010',
        a: 50,
        b: 40
    }, {
        y: '2011',
        a: 75,
        b: 65
    }, {
        y: '2012',
        a: 44,
        b: 55
    }],
    barColors: ['#37A8AF', '#0190D9'],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['Swing Voters', 'Volunteers'],
    hideHover: 'auto'
});
</script>
